<template>
  <el-dialog v-model="dialog.visible" :title="dialog.title" width="80%" @close="handleCloseDialog">
    <div class="order-detail-container">
      <el-descriptions title="订单信息" :column="2">
        <el-descriptions-item label="订单时间">{{ orderDetail.createTime }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag size="small" type="primary">
            {{ EQUITY_MALL_STATUS[orderDetail.orderStatus] }}
          </el-tag>
        </el-descriptions-item>
        \
        <el-descriptions-item label="收货人">
          {{ orderDetail.shippingName }}
        </el-descriptions-item>
        <el-descriptions-item label="收货地址">
          {{ orderDetail.shippingAddress + orderDetail.shippingAddressExt }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ orderDetail.shippingPhone }}
        </el-descriptions-item>
        <el-descriptions-item label="支付积分">
          <span class="points-price">{{ orderDetail.totalPointsPrice }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <el-scrollbar height="600px">
        <base-page-table :table-data="tableData" :table-columns-data="tableColumnsData">
          <template #expressCompany="scope">
            {{ scope.row.shippingExt?.name ?? "--" }}
          </template>
          <template #expressNo="scope">
            {{ scope.row.shippingExt?.no ?? "--" }}
          </template>
          <template #shippingStatus="scope">
            <el-tag size="small" type="primary">
              {{ EQUITY_MALL_SHIPPING_STATUS?.[scope.row.shippingStatus] }}
            </el-tag>
          </template>
          <template #productImage="scope">
            <el-image :src="scope.row.productImage" style="width: 100px; height: 100px" />
          </template>
          <template #productName="scope">
            <div class="flex flex-col">
              <span>{{ scope.row.productName }}</span>
              <span class="text-gray-500 text-sm">{{ scope.row.skuName }}</span>
            </div>
          </template>
          <template #action="scope">
            <el-button
              link
              type="success"
              @click="openSendGoods(scope.row)"
              :disabled="isSendDisabled(scope.row)"
            >
              发货
            </el-button>
          </template>
        </base-page-table>
      </el-scrollbar>
    </div>
    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template> -->
  </el-dialog>
  <dialog-send ref="dialogSendRef" @initList="initList" />
</template>
<script setup>
import EquityMallOrderAPI from "@/api/equitymall/order";
import {
  EQUITY_MALL_STATUS,
  EQUITY_MALL_SHIPPING_STATUS_OBJECT,
  EQUITY_MALL_SHIPPING_STATUS,
} from "@/enums/EquityMallEnum";
import DialogSend from "./dialog-send.vue";
// 定义 emit，用于通知外部关闭事件
const emit = defineEmits(["update:modelValue", "loadData"]);
const dialog = reactive({
  title: "",
  visible: false,
});
// 关闭弹窗
function handleCloseDialog() {
  emit("update:modelValue", false); // 关闭弹窗
}
function handleSubmit() {
  console.log("handleSubmit");
}
const configColumnsData = ref([
  {
    prop: "expressCompany",
    label: "快递公司",
    customSlot: "expressCompany",
  },
  {
    prop: "expressNo",
    label: "快递单号",
    customSlot: "expressNo",
  },
]);
const tableColumnsData = ref([
  {
    prop: "productImage",
    label: "商品图",
    customSlot: "productImage",
  },
  {
    prop: "productName",
    label: "商品名称",
    customSlot: "productName",
  },
  {
    prop: "productCount",
    label: "商品数量",
  },
  {
    prop: "shippingStatus",
    label: "发货状态",
    customSlot: "shippingStatus",
  },
  {
    prop: "pointsPrice",
    label: "支付积分",
  },
  ...configColumnsData.value,
  {
    prop: "action",
    label: "操作",
    customSlot: "action",
  },
]);
const tableData = ref([]);
const orderDetail = ref({});

function showModal(data) {
  dialog.visible = true;
  getDetailByIdFunc(data.id);
}
function initList() {
  getDetailByIdFunc(orderDetail.value.id);
}
async function getDetailByIdFunc(id) {
  try {
    const data = await EquityMallOrderAPI.getDetailById({ id });
    console.log(data);
    orderDetail.value = data;
    tableData.value = data.products.map((item) => {
      return {
        ...item,
        productImage: JSON.parse(item.productImage)[0].url,
        productName: item.productName,
        skuName: item.ext.reduce((acc, curr) => {
          return acc + curr.tags;
        }, ""),
      };
    });
  } catch (error) {
    console.log(error);
  }
}
function isSendDisabled(row) {
  let isDisabled = false;
  if (row.shippingStatus != EQUITY_MALL_SHIPPING_STATUS_OBJECT["已领取"]) {
    isDisabled = true;
  }
  return isDisabled;
}
const dialogSendRef = ref(null);
function openSendGoods(row) {
  console.log(row, "row");
  dialogSendRef.value.showModal(row);
}
defineExpose({
  showModal,
});
</script>
<style style="scss" scoped>
.order-detail-container {
  padding: 10px 10px 30px;
}
.points-price {
  color: #f56c6c;
}
</style>
